<script setup>
import { ref } from 'vue'

//控制盒子是否可见
const visible = ref(false)

//模拟是否登录
const isLogin=ref(true)

const score=ref(100)
</script>

<template>
  <!--  v-show-->
  <div class="red" v-show="visible">
  </div>

  <!-- v-if -->
  <div class="green" v-if="visible"></div>

  <hr />
  <!--  v-if配合v-else做双分支渲染-->
    <div v-if="isLogin">欢迎回来</div>
    <div v-else>你好，请登录</div>

  <hr/>

  <div v-if="score>=90">优秀</div>
  <div v-else-if="score>=70">良好</div>
  <div v-else>差</div>
</template>



<style scoped>
.red,
.green {
  width: 200px;
  height: 200px;
}

.red {
  background: red;
}

.green {
  background: green;
}
</style>